<template>
	<view class="pic">
		<scroll-view scroll-y="true" class="pic_left">
			<view  
			:class="active === index ? 'active' : ''"
			 v-for="(item,index) in tagList" 
			 :key="item.id"
			 @click="tagClick(index,item.id)"
			 >{{item.title}}</view>
			
		</scroll-view>
		<scroll-view scroll-y="true" class="pic_right">
			<view class="item" v-for="item in tagContent" :key="item.id">
				<image @click="imageClick(item.img_url)" :src="item.img_url" mode=""></image>
				<text>{{item.title }}</text>
			</view>
			<view v-if="tagContent.length === 0" class="content_none">
				暂无数据
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tagList:[],
				firstshow: true,
				active: 0,
				tagContent: []
			};
		},
		onLoad() {
			this.getPicTag()
			
		},
		methods:{
			async getPicTag() {
				const res = await this.$httpRes({
					url:'api/getimgcategory',
				})
				this.tagList = res.data.message
				if(this.firstshow){
					this.tagClick(0,this.tagList[0].id)
					this.firstshow = false
				}
			},
			async tagClick(index, id) {
				this.active = index
				const res = await this.$httpRes({
					url:'api/getimages/'+id,
				})
				this.tagContent = res.data.message
			},
			imageClick(img) {
				const urls = this.tagContent.map(item => {
					return item.img_url
				})
				uni.previewImage({
					urls,
					current: img,
					indicator: 'number'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
.pic{
	height: 100%;
	display: flex;
	.pic_left{
		width: 180rpx;
		height: 100%;
		border: 1px solid #eee;
		view{
			border-bottom: 1px solid #eee;
			line-height: 100rpx;
			height: 100rpx;
			width: 180rpx;
			color: #ccc;
			font-size: 30rpx;
			text-align: center;
		}
		.active{
			background-color: $uni-color-background;
			color: #fff;
		}
	}
	.pic_right{
		height: 100%;
		width: 550rpx;
		margin: 10rpx auto;
		.item{
			image{
				width: 530rpx;
				height: 530rpx;
				border-radius: 5rpx;
			}
			text{
				line-height: 50rpx;
			}
		}
		
	}
}
</style>
